<style scoped lang="stylus" type="text/stylus">
  @import '../../assets/commonCss/base.styl';
  @import 'css/onlineApply.styl';
</style>

<template>
  <div id="block">
    <VuePerfectScrollbar id="left-con" class="left-con scroll-area"
                         ref="policyLists" :settings="settingScroll">
      <ul class="policy-nav" v-if="policyListData.length">
        <li @click="policyDetails(items.id)"
            class="policy-nav-items"
            :class="{active:activeId==items.id}"
            v-for="items in policyListData"
            :key="items.id">
          <span class="mark"></span>
          <div class="top-right-unread" v-if="items.statistics && items.statistics.unread"><span>{{items.statistics.unread}}</span>
          </div>
          <div class="left">
            <div class="shortTitle">{{items.shortTitle}}</div>
            <div class="longTitle">{{items.longTitle}}</div>

            <div class="right"
                 v-if="items.statistics && (items.statistics.unprocessed||items.statistics.considering||items.statistics.unconsidered)">
              <!-- 新申请（尚未处理）-->
              <p v-if="items.statistics.unprocessed">新申请：{{items.statistics.unprocessed}}个</p>
              <!-- 待考虑（感兴趣）-->
              <!--<p v-if="items.statistics.considering">待处理：{{items.statistics.considering}}个</p>-->
              <!-- 暂时不考虑 -->
              <p v-if="items.statistics.unconsidered">暂不考虑：{{items.statistics.unconsidered}}个</p>
            </div>

            <div class="bottom">
              <p v-if="items.publishAt">发布于：{{ (items.publishAt) | fmtDate }}</p>
              <p v-if="items.deadline">政策到期日：{{ (items.deadline) | fmtDate }}</p>
            </div>
          </div>
        </li>
      </ul>
    </VuePerfectScrollbar>
    <div class="right-con" v-if="policyListData.length && policyStatistics">

      <VuePerfectScrollbar class="policy-statistics scroll-area"
                           ref="policyStatisticss" :settings="settingScroll">
        <div :class="{active:statisticsActiveID == 'all'}" class="policy-statistic-nav applyCount"
             @click="policyApplyList('all')">
          <span class="mark"></span>
          <p>全部线上申请</p>
          <p>{{policyStatistics.applyCount||0}}个</p>
        </div>
        <div class="to-do edit-group"
             v-if="policyStatistics.unprocessed||policyStatistics.considering||policyStatistics.unconsidered">
          <div class="title">待处理</div>
          <ul>
            <li :class="{active:statisticsActiveID == 'unprocessed'}" @click="policyApplyList('unprocessed')"
                v-if="policyStatistics.unprocessed">
              <span class="mark"></span>
              <p>尚未处理</p>
              <p>{{policyStatistics.unprocessed}}个</p>
            </li>
            <li :class="{active:statisticsActiveID == 'considering'}" @click="policyApplyList('considering')"
                v-if="policyStatistics.considering">
              <span class="mark"></span>
              <p>感兴趣</p>
              <p>{{policyStatistics.considering}}个</p>
            </li>
            <li :class="{active:statisticsActiveID == 'unconsidered'}" @click="policyApplyList('unconsidered')"
                v-if="policyStatistics.unconsidered">
              <span class="mark"></span>
              <p>不考虑</p>
              <p>{{policyStatistics.unconsidered}}个</p>
            </li>
          </ul>
        </div>

        <div class="interrupted edit-group"
             v-if="policyStatistics.rejected||policyStatistics.disapproved||policyStatistics.terminated">
          <div class="title">已中断</div>
          <ul>
            <li :class="{active:statisticsActiveID == 'rejected'}" @click="policyApplyList('rejected')"
                v-if="policyStatistics.rejected">
              <span class="mark"></span>
              <p>已驳回线上申请</p>
              <p>{{policyStatistics.rejected}}个</p>
            </li>
            <li :class="{active:statisticsActiveID == 'offlineRejected'}" @click="policyApplyList('offlineRejected')"
                v-if="policyStatistics.disapproved">
              <span class="mark"></span>
              <p>已驳回线下办理</p>
              <p>{{policyStatistics.disapproved}}个</p>
            </li>
            <li :class="{active:statisticsActiveID == 'terminated'}" @click="policyApplyList('terminated')"
                v-if="policyStatistics.terminated">
              <span class="mark"></span>
              <p>已强制中断</p>
              <p>{{policyStatistics.terminated}}个</p>
            </li>
          </ul>
        </div>

        <div class="interrupted edit-group"
             v-if="policyStatistics.appointed||policyStatistics.unappoint||policyStatistics.approved">
          <div class="title">已通过线上审核</div>
          <ul>
            <!-- <template v-if="_SERVER==123">
              <li :class="{active:server123}" @click="policyApplyList123()">
                <span class="mark"></span>
                <p>已通过线上审核</p>
                <p>{{policyStatistics123num}}个</p>
              </li>
            </template> -->
            <template>
              <li :class="{active:statisticsActiveID == 'appointed'}" @click="policyApplyList('appointed')"
                  v-if="policyStatistics.appointed">
                <span class="mark"></span>
                <p>已预约办理</p>
                <p>{{policyStatistics.appointed}}个</p>
              </li>
              <li :class="{active:statisticsActiveID == 'unappoint'}" @click="policyApplyList('unappoint')"
                  v-if="policyStatistics.unappoint">
                <span class="mark"></span>
                <p>尚未确定办理时间</p>
                <p>{{policyStatistics.unappoint}}个</p>
              </li>
              <li :class="{active:statisticsActiveID == 'approved'}" @click="policyApplyList('approved')"
                  v-if="policyStatistics.approved">
                <span class="mark"></span>
                <p>已确认拨款</p>
                <p>{{policyStatistics.approved}}个</p>
              </li>
            </template>

          </ul>
        </div>

      </VuePerfectScrollbar>

      <VuePerfectScrollbar class="right01-con policy-apply-list scroll-area"
                           ref="policyApplyLists" :settings="settingScroll">
        <div v-if="policyApplyListData.length"
             class="policy-apply-ul"
             @click="policyApplyDetail(items.id)"
             v-for="items in policyApplyListData"
             :key="items.id">
          <span v-if="items.applyStatus == 20" class="mark"></span>
          <div class="company-name">{{items.companyName}}</div>
          <div>
            <div class="apply-status">
              <span>{{applyStatusGroup(items.applyStatus)}}</span>
              <span>（{{applyStatusStr(items.applyStatus)}}）</span>
            </div>
            <div class="applyPrizes">
              <div class="applyPrizesTitle">申请概况</div>
              <p v-for="(prizes,prizeIndex) in items.applyPrizes" :key='index'>资助{{prizeIndex+1}}：{{prizes.prizeTitle}}<span
                v-if="prizes.amount" class="number">（{{prizes.amount}}万）</span>
              </p>
            </div>
            <div class="applyAt">申请提交时间：{{ (items.applyAt) | fmtDate }}</div>
          </div>
          <!-- 
          <Button  class="subscribeBtn" @click.stop type="info">预约线下办理</Button>
          -->
        </div>
      </VuePerfectScrollbar>
      <Page v-if="policyApplyListData.length != 0" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="handlePage" @on-page-size-change="handlePageSize" :current="pageNum" class="PageStyle"></Page>
    </div>
  </div>
</template>

<script>
  export default {
    name    : "onlineApply",
    data() {
      return {
        policyListData     : [],
        policyStatistics   : null,
        activeId           : null,
        statisticsActiveID : "applyCount",
        policyApplyListData: [],
        settingScroll      : {
          suppressScrollX: true
        },
        server123apply     : ["appointed", "unappoint"],
        pageNum: 1,
        pageSize: 1,
        totalCount: 0
      };
    },
    computed: {
      getRouteQuery() {
        return this.$route.query;
      },
      server123() {
        return this.server123apply.includes(this.statisticsActiveID);
      },
      policyStatistics123num() {
        return (
          (this.policyStatistics.appointed || 0) +
          (this.policyStatistics.unappoint || 0)
        );
      }
    },
    methods : {
      policyList() {
        this.ajaxData(
          {
            type: "get",
            url : "/policy/page",
            data: {
              type    : "P",
              pageSize: 100,
              filterSection: true
            }
          },
          (res, all) => {
            if (all.code == 0) {
              for (let v of res.results) {
                if (!v.statistics) {
                  v.statistics = {id: 0};
                }
              }
              this.policyListData = res.results;

              this.$store.commit("setOnlineApply", {
                obj: "policyList",
                res: res.results
              });
              setTimeout(() => {
                document.querySelector(".left-con").scrollTop =
                  this.getRouteQuery.scrollLeftTop || 0;
                this.$refs.policyLists.update();
              }, 10);
              this.policyDetails(
                this.getRouteQuery.policyId || res.results[0].id
              );
            }
          }
        );
      },
      policyDetails(id) {
        this.activeId = id;
        this.policyListData.forEach((item, index, array) => {
          item.id == id ? (this.policyStatistics = item.statistics) : "";
        });
        this.policyApplyList("all");
      },
      policyApplyList(type) {
        this.statisticsActiveID = type;
        this.pageNum = 1;
        this.pageSize = 1;
        this.ajaxData(
          {
            type: "get",
            url : `/apply/policy/${this.activeId}`,
            data: {
              type    : type,
              page: 1,
              pageSize: 10
            }
          },
          (res, all) => {
            if (all.code == 0) {
              this.policyApplyListData = res.results || [];
              this.totalCount = res.totalPage;
              setTimeout(() => {
                document.querySelector(".right01-con").scrollTop =
                  this.getRouteQuery.scrollRightTop || 0;
                this.$refs.policyApplyLists.update();
              }, 10);
            }
          }
        );
      },
      policyApplyList123() {
        this.statisticsActiveID = "appointed";
        this.ajaxData(
          {
            type: "get",
            url : `/apply/policy/${this.activeId}`,
            data: {
              type    : "appointed",
              pageSize: 100
            }
          },
          (res1, all1) => {
            if (all1.code == 0) {
              this.ajaxData(
                {
                  type: "get",
                  url : `/apply/policy/${this.activeId}`,
                  data: {
                    type    : "unappoint",
                    pageSize: 100
                  }
                },
                (res2, all2) => {
                  if (all2.code == 0) {
                    this.policyApplyListData = [...res1.results, ...res2.results];
                    setTimeout(() => {
                      document.querySelector(".right01-con").scrollTop =
                        this.getRouteQuery.scrollRightTop || 0;
                      this.$refs.policyApplyLists.update();
                    }, 10);
                  }
                }
              );
            }
          }
        );
      },
      policyApplyDetail(id) {
        this.$router.push({
          path : "/component",
          name : "Component",
          query: {
            id       : id,
            name     : "onlineApply",
            pageName : "查看企业线上申请",
            scrollLeftTop: document.querySelector(".left-con").scrollTop,
            scrollRightTop: document.querySelector(".right01-con").scrollTop
          }
        });
      },
      handlePage(value){
        this.pageNum = value;
        let type = this.statisticsActiveID;
        this.ajaxData(
          {
            type: "get",
            url : `/apply/policy/${this.activeId}`,
            data: {
              type    : type,
              page: this.pageNum,
              pageSize: 10
            }
          },
          (res, all) => {
            if (all.code == 0) {
              this.policyApplyListData = res.results || [];
              this.totalCount = res.totalPage;
              setTimeout(() => {
                document.querySelector(".right01-con").scrollTop =
                  this.getRouteQuery.scrollRightTop || 0;
                this.$refs.policyApplyLists.update();
              }, 10);
            }
          }
        );
      },
      handlePageSize(value) {  
        this.pageSize = value
        let type = this.statisticsActiveID;
        this.ajaxData(
          {
            type: "get",
            url : `/apply/policy/${this.activeId}`,
            data: {
              type    : type,
              page: this.pageNum,
              pageSize: 10
            }
          },
          (res, all) => {
            if (all.code == 0) {
              this.policyApplyListData = res.results || [];
              this.totalCount = res.totalPage;
              setTimeout(() => {
                document.querySelector(".right01-con").scrollTop =
                  this.getRouteQuery.scrollRightTop || 0;
                  this.$refs.policyApplyLists.update();
              }, 10);
            }
          }
        );
      }
    },
    created() {
      this.policyList();
    },
    mounted() {}
  };
</script>
